import React, {useEffect, useState} from 'react'
import {apiGetRedisList} from "@/apis/opt";
import {Card, Col, Descriptions, Badge, Row} from 'antd'
import styles from './index.module.scss';
import KeyChart from './components/KeyChart'
import CommandStatsChart from "./components/CommandStatsChart";
import RAMChart from "@/pages/opt/redis/components/RAMChart";

const Redis: React.FC<any> = () => {

  const [redisData, setRedisData] = useState<any>({})

  useEffect(() => {
    const res = getInfo()
    const timer = setInterval(() => {
      getInfo()
    }, 3000)
    return () => {
      clearInterval(timer)
    }
  }, [])

  const getInfo = async () => {
    const res = await apiGetRedisList(true)
    setRedisData({...res.data})
  }

  return (
    <div className={styles.container}>
      <Row gutter={[20, 20]}>

        <Col lg={{span: 12}} md={{span: 12}} xs={{span: 24}}>
          <Descriptions title="基本信息" bordered column={2} style={{margin: '20px 0 20px 20px', height: '400px'}}>
            <Descriptions.Item label="Redis版本">
              {redisData.info?.redis_version}
            </Descriptions.Item>
            <Descriptions.Item label="运行模式">
              {redisData?.info?.redis_mode == "standalone" ? "单机" : "集群"}
            </Descriptions.Item>
            <Descriptions.Item label="端口">
              {redisData?.info?.tcp_port}
            </Descriptions.Item>

            <Descriptions.Item label="客户端数">
              {redisData?.info?.connected_clients}
            </Descriptions.Item>

            <Descriptions.Item label="运行时间(天)">
              {redisData?.info?.uptime_in_days}
            </Descriptions.Item>

            <Descriptions.Item label="实用内存">
              {redisData?.info?.used_memory_human}
            </Descriptions.Item>

            <Descriptions.Item label="实用CPU">
              {parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2)}
            </Descriptions.Item>

            <Descriptions.Item label="内存配置">
              {redisData?.info?.maxmemory_human}
            </Descriptions.Item>

            <Descriptions.Item label="AOF是否开启">
              {redisData?.info?.aof_enabled == "0" ? "否" : "是"}
            </Descriptions.Item>

            <Descriptions.Item label="RDB是否成功">
              {redisData?.info?.rdb_last_bgsave_status}
            </Descriptions.Item>
            <Descriptions.Item label="网络入口/出口">
              {redisData?.info?.instantaneous_input_kbps}kps/{redisData?.info?.instantaneous_output_kbps}kps
            </Descriptions.Item>
          </Descriptions>
        </Col>

        <Col lg={{span: 12}} md={{span: 12}} xs={{span: 24}}>
          <CommandStatsChart commandStats={redisData?.commandStats}/>
        </Col>

        <Col md={{span: 12}} xs={{span: 24}}>
          <RAMChart
            usedmemory={parseFloat(redisData?.info?.used_memory_human)}
            usedMemoryPeakHuman={parseFloat(redisData?.used_memory_peak_human)}
            time={redisData?.time}
          />
        </Col>

        <Col md={{span: 12}} xs={{span: 24}}>
          <KeyChart dbSize={redisData.dbSize} time={redisData.time}/>
        </Col>
      </Row>
    </div>
  )
}

export default Redis
